<template>
  <div class="js-table" :class="className">
    <JsToolBar :config="toolBar" :extraParams="extraParams" />
    <div class="js-table-pannel">
      <el-table
        :span-method="events.spanMethod"
        :summary-method="events.summaryMethod"
        :show-summary="events.summaryMethod"
        stripe
        ref="tableView"
        :data="dataSource"
        :border="true"
        :row-class-name="tableRowClassName"
        style="text-align: center"
        @selection-change="handleSelectionChange"
        row-key="id"
      >
        <!-- 添加复选框 -->
        <el-table-column
          v-if="columns.selection"
          type="selection"
          width="55"
          prop="selection"
          :reserve-selection="false"
        ></el-table-column>
        <el-table-column
          v-for="(item, index) in columns.props"
          :label="item.name"
          :key="index"
          :prop="item.key"
          :width="item.width ? item.width : ''"
          :show-overflow-tooltip="true"
          class="ellipsis"
        >
          <template #default="scope">
            <slot :name="item.key" :row="scope.row">
              <component
                :is="compsMap[item.el ? item.el : 'text']"
                :row="scope.row"
                :col="item"
              ></component>
            </slot>
          </template>
        </el-table-column>
        <!-- 添加操作按钮 -->
        <el-table-column
          v-if="columns.options"
          :label="
            columns.options.operateName ? columns.options.operateName : '操作'
          "
          :width="optionsWidth"
        >
          <template #default="scope">
            <template
              v-for="(item, j) in columns.options.btns"
              :key="j"
            >
              <slot :name="item.key + '-option'" :row="scope">
                <el-button
                  size="small"
                  :type="item.type ? item.type : 'primary'"
                  @click="item.event(scope.row)"
                  >{{ item.label }}</el-button
                >
              </slot>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <js-pagination
      v-if="showPagination"
      :pageIndex="pageValue.pageIndex"
      :pageSize="pageValue.pageSize"
      :total="pageValue.total"
      :CallBack="changePage"
      class="page-view"
      :class="'page-view ' + pageAlign"
      :pageSizes="pageSizes"
    ></js-pagination>
    <slot name="add"></slot>
    <slot name="edit"></slot>
  </div>
</template>
<script setup lang="ts">
import TableFormat from '@/components/js-table/comps/TableFormat.vue'
import TableHref from '@/components/js-table/comps/TableHref.vue'
import TableText from '@/components/js-table/comps/TableText.vue'
import TablePoint from '@/components/js-table/comps/TablePoint.vue'
const compsMap = ref<any>({
  format: shallowRef(TableFormat),
  href: shallowRef(TableHref),
  text: shallowRef(TableText),
  point: shallowRef(TablePoint),
})
const props = defineProps({
  delVisible: {
    type: Boolean,
    default: false,
  }, //删除提示弹框的状态
  autoHeight: {
    type: Boolean,
    default: false,
  },
  showPagination: {
    type: Boolean,
    default: true,
  },
  pageAlign: {
    type: String,
    default: 'right',
  },
  total: {
    type: Number,
    default: 0,
  },
  pageSizes: {
    type: [Array],
    default: function () {
      return [5, 10, 15, 20]
    },
  },
  // 动态刷新 调用search
  refresh: {
    type: Number,
    default: -1,
  },
  toolBar: {
    type: Object,
    default: function () {
      return {}
    },
  },
  api: {
    type: Object,
    default: function () {
      return {}
    },
  },
  dateFormat: {
    type: String,
    default: 'YYYY-MM-DD HH:mm:ss', // X标识传值为10位时间戳，x标识传值为13位时间戳
  },
  events: {
    type: Object,
    default: function () {
      return {}
    },
  },
  dataSource: {
    type: Array,
    default: function () {
      return []
    },
  },
  columns: {
    type: Object,
    default: function () {
      return {
        selection: true,
        props: [],
        options: {
          detail: true,
        },
      }
    },
    reload: {
      type: Boolean,
      default: false,
    },
  },
  defaultPageSize: {
    type: Number,
    default: 10,
  },
})
const className = computed(() => {
  if (props.autoHeight) {
    return 'auto-height'
  } else {
    return ''
  }
})
const emit = defineEmits(['search', 'selectionChange'])

const optionsWidth = computed(() => {
  const width = props.columns.options?.btns?.reduce((p: number) => {
    return p
  }, 24)
  return props.columns.options.width ? props.columns.options.width : width
})

const tableView = ref(null)
const pageValue = ref({
  pageIndex: 1, //当前页
  pageSize: props.defaultPageSize, //默认10条一页
  total: 0, //一共多少条数据
})

const extraParams = ref({
  ...{
    page: pageValue.value.pageIndex,
    pageSize: pageValue.value.pageSize,
  },
})

let multipleSelection = ref([] as any) //多选的数据
watch(
  () => props.defaultPageSize,
  (defaultPageSize: number) => {
    pageValue.value.pageSize = defaultPageSize
  }
)
watch(
  () => props.total,
  (defaulttotal: number) => {
    pageValue.value.total = defaulttotal
  }
)
watch(
  () => pageValue.value.total,
  (total:number) => {
    if (total <= pageValue.value.pageSize) {
      pageValue.value.pageIndex = 1
    }
  }
)

const search = () => {
  pageValue.value.pageIndex = 1
  emit('search', {
    ...props.toolBar.form,
    ...{
      page: pageValue.value.pageIndex,
      pageSize: pageValue.value.pageSize,
    },
  })
}

watch(
  () => props.refresh,
  (val:any) => {
    if(val){
      search()
    }
  },
  {
    immediate: true,
  }
)

const changePage = () => {
  emit('search', {
    ...props.toolBar.form,
    ...{
      page: pageValue.value.pageIndex,
      pageSize: pageValue.value.pageSize,
    },
  })
}
const tableRowClassName = ({ rowIndex }: { rowIndex: number }) => {
  if (rowIndex % 2 === 1) {
    //=>这里可以改成 rowIndex%2=== 1，后面直接else即可达到隔行变色效果。
    return 'warning-row'
  } else if (rowIndex % 2 === 0) {
    return 'success-row'
  }
  return ''
}
//操作复选框回调
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val
  emit('selectionChange', multipleSelection.value)
}
</script>
<style lang="scss" scoped>
:deep(.el-input__wrapper) {
  font-size: 13px;
  width: 100%;
}

.js-table {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 10px 10px 0px 10px;

  gap: 20px;
}

.toolbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px;

  .el-button--mini {
    padding: 7px 15px !important;
  }

  .table-search-item {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    margin-right: 0.1rem;
    flex-shrink: 0;
    margin-bottom: 0.3rem;
    margin-top: 0.3rem;
    margin-left: 0.3rem;

    .title {
      margin: 0 0.3rem 0 0;
      flex-shrink: 0;
      font-size: 13px;
      text-align: right !important;
    }
  }
}

.js-table-pannel {
  width: 100%;
  .el-table {
    height: 100%;
  }
  :deep(.el-table__cell) {
    font-size: 12px !important;
  }
  :deep(.el-button) {
    font-size: 12px !important;
  }
  :deep(.el-table) {
    ::-webkit-scrollbar {
      display: inline;
      height: 7px;
    }
    ::-webkit-scrollbar-track,
    ::-webkit-scrollbar-thumb {
      border-radius: 999px;
      border: 1px solid transparent;
    }
    ::-webkit-scrollbar-thumb {
      box-shadow: none;
      background-color: lightgray;
    }
    th {
      background-color: #eeeeee;
      color: black;
      padding: 8px 0px;
      font-size: 12px;
    }
    tr {
      &.warning-row {
        background: #fafafa !important;
      }
      &.success-row {
        background: white !important;
        td {
          padding: 12px 0;
          min-width: 0;
          background: white !important;
        }
      }
      font-size: 12px;
    }
  }
}
.page-view {
  background: white;
  border-radius: 0.05rem;
  text-align: right;
  padding-right: 15px;
  &.right {
    align-self: flex-end;
  }
}
.table-search-item {
  :deep(.el-input) {
    width: 180px !important;
  }
  :deep(.el-select) {
    width: 180px !important;
  }
}
.del-dialog {
  padding: 20px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 20px;
  &-title {
    font-size: 18px;
    display: flex;
    justify-content: start;
    width: 100%;
    padding-left: 20px;
  }
  &-content {
    padding: 10px 20px;
  }
  &-footer {
    display: flex;
    justify-content: end;
  }
}
</style>
